<template>
	<view class="wrap" v-show="showWrap">
		<view class="no_record" v-if="!recordList.length">
			<view class="start_record_title">开始记录您的爱龟吧</view>
			<view class="start_record_box" @click="addTurtle">
				<image class="add_img" src="../../static/record/add.png" mode="" />
			</view>
		</view>
		<view class="record_list" v-else>
			<view class="record_item" v-for="item in recordList" :key="item._id" @click="toRecordList(item)">
				<!-- <image class="cut_img" src="../../static/record/cut_right.png" mode="aspectFit" v-if="showCut"/> -->
				<view class="record_box">
					<view v-if="showCut" class="overlay">
						<span class="minus">-</span>
					</view>
					<image class="record_img" :src="item.turtle_url?item.turtle_url:'../../static/avatar.png'" mode="aspectFill"/>
				</view>
				<view class="record_name">
					{{item.turtle_name}}
				</view>
			</view>
		</view>
		<view class="suspension_box" v-if="recordList.length">
			<view class="cancel_bot" v-if="showCut" @click="cutTurtle">
				<span class="cancel_text">取消</span>
			</view>
			<view v-else>
					<view class="record_item add_item" @click="addTurtle">
					<image class="add_img" src="../../static/record/add.png" mode="aspectFit"/>
				</view>
				<view class="record_item add_item" @click="cutTurtle">
					<image class="add_img" src="../../static/record/add_gray.png" mode="aspectFit"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { callCloudFunction, checkTokenExpired } from '@/utils/cloudRequest.js';

// 响应式数据
const recordList = ref([]);
const alreadyGet = ref(false);
const showCut = ref(false);
const showWrap = ref(false);

// 跳转到记录列表或删除乌龟
const toRecordList = async (item) => {
  if (showCut.value) {
    const res = await uni.showModal({
      title: `删除记录`,
      content: `您确定删除${item.turtle_name}及所有记录吗`,
      showCancel: true
    });
    
    if (res.confirm) {
      try {
        const removeRes = await callCloudFunction('removeOfTurtle', {
          _id: item._id
        });
        
        // 检查是否 token 过期
        if (checkTokenExpired(removeRes.result)) {
          uni.showToast({ title: '登录已过期，请重新登录', icon: 'none' });
          uni.navigateTo({ url: '/pages/minePages/mine' });
          return;
        }
        
        await clearTheRecord(item);
        await getListData();
        uni.showToast({
          duration: 2000,
          icon: "success",
          title: "删除成功"
        });
        showCut.value = false;
      } catch (e) {
        console.error('删除失败:', e);
        uni.showToast({
          title: '删除失败，请重试',
          icon: 'none'
        });
      }
    } else if (res.cancel) {
      showCut.value = false;
    }
  } else {
    uni.navigateTo({
      url: `/pages/recordPages/recordList?id=${item._id}`
    });
  }
};

// 清除乌龟相关的所有记录
const clearTheRecord = async (item) => {
  try {
    const res = await callCloudFunction('removeTheAllRecord', {
      _id: item._id
    });
    
    // 检查是否 token 过期
    if (checkTokenExpired(res.result)) {
      uni.showToast({ title: '登录已过期，请重新登录', icon: 'none' });
      uni.navigateTo({ url: '/pages/minePages/mine' });
      return;
    }
    
    console.log('removeTheAllRecord-res', res);
  } catch (e) {
    console.error('清除记录失败:', e);
  }
};

// 添加乌龟
const addTurtle = () => {
  uni.navigateTo({
    url: `/pages/recordPages/addTurtle`
  });
};

// 切换删除模式
const cutTurtle = () => {
  showCut.value = !showCut.value;
};

// 获取乌龟列表数据
const getListData = async () => {
  try {
    const res = await callCloudFunction('getTurtleRecordList', {
      user_id: uni.getStorageSync('userId')
    });
    
    // 检查是否 token 过期
    if (checkTokenExpired(res.result)) {
      uni.showToast({ title: '登录已过期，请重新登录', icon: 'none' });
      uni.navigateTo({ url: '/pages/minePages/mine' });
      return;
    }
    
    const result = res.result;
    if (result.code === 200) { // 修复了这里的比较运算符
      showWrap.value = true;
      console.log(recordList.value, 'recordList');
      recordList.value = result.data.data;
      alreadyGet.value = true;
    }
  } catch (e) {
    console.error('获取乌龟列表失败:', e);
    uni.showToast({
      title: '获取数据失败，请重试',
      icon: 'none'
    });
  }
};

// 页面显示时获取数据
onShow(() => {
  getListData();
});
</script>

<style lang="scss" scoped>
.wrap{
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	.no_record {
		width: 100%;
		text-align: center;
		padding-top: 100rpx;
		.start_record_title {
			font-size: 36rpx;
		}
		.start_record_box {
			padding-top: 66rpx;
			.add_img {
				width: 180rpx;
				height: 180rpx;
            	animation: myBreath 2s linear infinite;  
			}

			@keyframes myBreath {
				0%{
					transform: scale(0.88);
				}
				50%{
					transform: scale(100%);
				}
				100%{
					transform: scale(0.88);
				}
			}
		}
	}

	.record_list,
	.suspension_box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 38rpx 0 38rpx 35rpx;
		box-sizing: border-box;
		.add_item {
			// width: 146rpx;
			padding-top: 30rpx;
			height: 146rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			/* #ifdef H5 */
			width: 140rpx;
			padding-top: 0;
			/* #endif */
			.add_img {
				width: 146rpx;
				height: 146rpx;
				border-radius: 0;
				/* #ifdef H5 */
				width: 100rpx;
				height: 100rpx;
				/* #endif */
			}
		}
		.record_item {
			width: 30%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-bottom: 35rpx;
			position: relative;
			// width: 186rpx;
			.record_box {
				position: relative;
			}
			.record_img {
				flex-shrink: 0;
				width: 146rpx;
				height: 146rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
				background: #eee;
				border: 8rpx dashed #3d836d;
			}
			.record_name {
				font-size: 28rpx;
			}
			.cut_img {
				width: 16px;
				height: 16px;
				position: absolute;
				top: 0;
				right: 36rpx;
				z-index: 9;
			}
			.cut_img_box {
				width: 8px;
				height: 8px;
				display: flex;
				justify-content: center;
				align-content: center;
				position: absolute;
				top: 0;
				right: 36rpx;
				background: #3d836d;
				border-radius: 50%;
				z-index: 9;
			}
			.overlay {
				width: 158rpx;
				height: 158rpx;
				border-radius: 50%;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 9;
			}

			.minus {
				color: white; /* 减号颜色 */
				font-size: 48px; /* 减号大小 */
				padding-bottom: 16rpx;
			}
		}
	}
	.suspension_box {
		width: auto;
		position: fixed;
		bottom: 100rpx;
		right: 30rpx;
		display: flex;
		flex-direction: column;

		.cancel_bot {
			position: fixed;
			left: 0;
			bottom: 0;
			background: #3d836d;
			width: 100%;
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.cancel_text {
				color: #fff;
				font-size: 36rpx;
			}
		}
		
		.add_item {
			padding-bottom: 0;
			.add_img {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
}
</style>
